page {
	background: #e7e7e7 !important;
}

.box4{
	display: flex;
	justify-content: center;
	align-items: center;	
}
.box4 .info{
	height: 17vh;
	margin-top: 2vh;
	width: 90%;
	background-color: #fff;
	border-radius: 20rpx;
	display: flex;
	justify-content: center;
	align-items: center;	
}
.box4 .info .left{
	width: 50%;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;	
}
.box4 .info .left .pic{
	height: 9vh;
	width: 9vh;
	border-radius: 50%;
	margin-top: 1vh;
	background-color: #004da0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.box4 .info .left .pic image{
	height: 4vh;
	width: 6vh;			
}
.box4 .info .right .pic image{
	height: 4vh;
	width: 6vh;			
}
.box4 .info .left .text{
	margin-top: 1vh;
	font-size:20rpx;
	color: #808080;
}

.box4 .info .right{
	width: 50%;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	border-left: 1rpx solid #e7e7e7;
}
.box4 .info .right .pic{
	height: 9vh;
	width: 9vh;	
	border-radius: 50%;
	background-color:#6db919;
	display: flex;
	justify-content: center;
	align-items: center;
}
.box4 .info .right .pic image{
	height: 5vh;
	width: 6vh;			
}
.box4 .info .right .text{
	margin-top: 1vh;
	font-size:20rpx;
	color: #808080;
}


.box3{
	display: flex;
	justify-content: center;
	align-items: center;	
}
.box3 .info{
	height: 10vh;
	margin-top: 2vh;
	width: 90%;
	background-color: #fff;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	position: relative;
}
.box3 .info .pic{
	height: 7vh;
	width: 7vh;
	border-radius: 50%;
	margin-left: 5vw;
}
.box3 .info .pic image{
	height: 100%;
	width: 100%;	
}
.box3 .info .name{
	font-size: 25rpx;
	margin-left: 5vw;
}
.box3 .info .LoginBox{
	height: 3vh;
	width: 20vw;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 30rpx;
	border-radius: 20rpx;
	background-color: #004da0;
	color: #fff;
	position: absolute;
	transform: translate(0, -50%);
	right: 4vw;
	top:50%;
	
}

.TopImg .swiper {
	height: 100%;
	width: 100%;
}

.TopImg .Img {
	height: 100%;
	width: 100%;
}

.TopImg {
	height: 37vh;
	width: 100%;
	position: relative;
}
.TopImg .logo{
	font-size: 10vw;
	position: absolute;
	top: 4vh;
	left: 5vw;
}
.TopImg .logo image{
	width: 18vw;
	height: 4.5vh;
}
.box2 {
	display: flex;
	justify-content: center;
	align-items: center;
}

.box2 .btnBox {
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
	height: 14vh;
	width: 14vh;
	border-radius: 50%;
	background-color:rgba(240, 240, 240,0.3) ;
	display: flex;
	justify-content: center;
	align-items: center;
}

.box2 .btnBox .openDoor {
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
	height: 12vh;
	width: 12vh;
	border-radius: 50%;
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	color: #004da0;
	font-size: 45rpx;
	font-weight: 700;
}

.CenterBox {
	margin-top: 1vh;
	height: 16vh;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.CenterBox .centerbody {
	height: 100%;
	width: 90%;
}

.centerbody image {
	height: 100%;
	width: 100%;
}

.module:last-child {
	margin-bottom: 200rpx;
}

.module .title {
	padding: 20rpx;
	color: black;
	font-weight: bold;
	font-size: 30rpx;
}

.module .blocks {
	background: white;
	display: flex;
	flex-wrap: wrap;
}

.module .blocks .block {
	width: 33.3%;
	text-align: center;
	padding: 20rpx 0;
}

.module .blocks .block image {
	width: 70%;
	height: 23vw;
	background: #f5f5f5;
	/* #FFDA00 */
}

.module .blocks .block .name {
	padding: 10rpx 30rpx;
	/* 	overflow: hidden;
	text-overflow: ellipsis; */
	/* white-space: nowrap; */
	color: grey;
}

.module .blocks .block .price {
	color: orangered;
	font-weight: bold;
}

.footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 8vh;
	/* color: #fff; */
}

.footer .contents {
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	padding-bottom: 10rpx;
	/* padding-top: 10rpx; */
	position: relative;
	box-shadow: #eaeaea 4rpx 0 4rpx 0;
}

.footer .nav {
	width: 20vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
}

.footer .nav image {
	width: 50rpx;
	height: 50rpx;
	position: relative;
}
.footer .nav1 .image image {
	width: 50rpx;
	height: 50rpx;
	position: relative;	
}
.footer .nav1 .image {
	width: 90rpx;
	height: 90rpx;
	border-radius: 45%;
	background-color: #004da0;
	display: flex;	
	justify-content: center;
	align-items: center;
	margin-top: 10rpx;
}
.footer .nav .text {
	font-size: 28rpx;
	color: #c9c9c9;
}
.footer .nav1 .text {
	font-size: 28rpx;
	color: #c9c9c9;
}
.footer .contents .nav1 {
	z-index: 999;	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 45%;
	height: 140rpx;
	width: 140rpx;
	background-color: #fff;		
	top: -45rpx;
	position: relative;
}
.payscore-logo {
	width: 32rpx;
	height: 32rpx;
}

.payscore-text {
	margin-left: 8rpx;
	font-size: 8pt;
	color: #666666;
	font-family: PingFangSC-Regular, sans-serif;
}

.vertical-bar {
	margin-left: 8rpx;
	font-size: 8pt;
	color: #99666666;
	font-family: PingFangSC-Regular, sans-serif;
}

.open-wrapper {
	width: 340rpx;
	height: 6.5vh;
	position: absolute;
	bottom: 14vh;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 200rpx;
	background: #2b1910;
	box-shadow: 1px 1px 1px 1px #2b1910;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 4vh;
	font-weight: normal;
}

.slogan-wechat {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	position: absolute;
	bottom: 10vh;
	left: 50%;
	transform: translateX(-50%);
	font-size: 4vh;
	font-weight: normal;
}

.logo {
	width: 50rpx;
	height: 50rpx;
}

.open {
	margin-left: 16rpx;
	font-size: 32rpx;
	font-weight: normal;
	color: #eaeaea;
}

.content {
	display: flex;
	background: white;
	height: calc(100vh - 500rpx);
	padding-top: 20rpx;
}

.nobanner {
	height: calc(100vh - 200rpx);
}

.content .classyList {
	width: 20vw;
	background: #f5f5f5;
	overflow: auto;
}


.content .classyList .classy {
	text-align: center;
	border-bottom: 1px solid white;
	padding: 20rpx 5rpx;
	color: grey;
}

.content .classyList .active {
	background: white;
	font-weight: bold;
	color: black;
}


.content .product-item {
	width: 33.33%;
	box-sizing: border-box;
	text-align: center;
	padding: 0 6.28%;
	margin-bottom: 40rpx;
}

.product-item .product-name {
	overflow: hidden;
	word-break: break-all;
	/* break-all(允许在单词内换行。) */
	text-overflow: ellipsis;
	/* 超出部分省略号 */
	display: -webkit-box;
	/** 对象作为伸缩盒子模型显示 **/
	-webkit-box-orient: vertical;
	/** 设置或检索伸缩盒对象的子元素的排列方式 **/
	-webkit-line-clamp: 2;
	/** 显示的行数 **/
}

.content .product-item image {
	width: 172rpx;
	height: 172rpx;
	display: inline-block;
}

.content .product-item .coupon {
	padding-top: 6rpx;
	color: #ff5722;
}

.swiper-banner {
	background-color: #f1f1f1;
}

.swiper-banner .swiper {
	height: 300rpx;
}

.swiper-banner .swiper image {
	width: 100%;
	height: 100%;
}

/*弹性布局样式*/
.uni-row {
	flex-direction: row;
	align-content: start;
}

.uni-flex {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

.contact-service {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 130rpx;
	height: 60rpx;
	padding: 6px;
	;
	position: fixed;
	top: 70%;
	right: 0;
	z-index: 999;
	font-size: 14px;
	text-align: center;
	border-radius: 50rpx 0 0 50rpx;
	border-color: #333333;
	box-shadow: #eaeaea 5px 2px 2px 2px;
}

.contact-service:active {}

.contact-logo {
	width: 48rpx;
	height: 48rpx;
}

.contact-text {
	margin-left: 16rpx;
}